<script setup lang="jsx">
import { ref } from 'vue';
import { ElButton, ElTag } from 'element-plus';
import { useBoolean } from '@sa/hooks';
import { fetchShopSeach } from '@/service/api';
import { useTable } from '@/hooks/common/table';
import { useAppStore } from '@/store/modules/app';
import { $t } from '@/locales';
import StoreSearch from './modules/store-search.vue';
import StoreAddModal from './modules/store-add-modal.vue';
import StoreEditModal from './modules/store-edit-modal.vue';

const appStore = useAppStore();
const { bool: addVisible, setTrue: openAddModal } = useBoolean();
const { bool: viewVisible, setTrue: openViewModal } = useBoolean();
const currencyList = ref([])

const { columns, data, loading, getData, getDataByPage, mobilePagination, searchParams, resetSearchParams } = useTable({
  apiFn: fetchData,
  apiParams: {
    PageIndex: 1,
    PageSize: 10,
    ShopId: undefined,
    ShopName: undefined,
    platform: -1,
    tag: undefined,
    times: undefined,
    AuthState: -1
  },
  columns: () => [
    { prop: 'ShopId', label: $t('page.store.id') },
    { 
      prop: 'Country', 
      label: $t('page.store.country'),
      formatter: row => {
        const obj = currencyList.value.find(x=> x.CountryCode === row.Country)
        return obj?.CountryName || '-'
      }
    },
    { 
      prop: 'PlatformsId', 
      label: $t('page.store.platform'),
      formatter: row => {
        const platformMap = {
          0: 'shopee',
          1: 'tiktok',
          2: 'tokopedia',
        }
        return <span><img src={'/src/assets/images/platform/'+platformMap[row.PlatformsId]+'.png'} />{row.PlatformsId}</span>
      }
    },
    { prop: 'Name', label: $t('page.store.name') },
    { prop: 'realName', label: $t('page.store.realName') },
    { prop: 'CreateTime', label: $t('page.store.authTime') },
    { 
      prop: 'AuthState', 
      label: $t('page.store.advancedAuth'), 
      formatter: row => {
        if (row.AuthState === undefined) return '';

        if(row.AuthState){
          return <ElTag type="danger">{$t('common.authStatus.isNo')}</ElTag>;
        }else{ // 0
          return <el-text type="success">{$t('common.authStatus.isOk')}</el-text>
        }
      }
    },
    {
      prop: 'status',
      label: $t('page.store.status'),
      width: 100,
      formatter: row => {
        if (row.AdsAuthState === undefined) return '';

        if(row.AdsAuthState){
          return <ElTag type="danger">{$t('common.authStatus.isNo')}</ElTag>;
        }else{ // 0
          return <ElTag type="success">{$t('common.authStatus.isOk')}</ElTag>;
        }
      }
    },
    {
      prop: 'operate',
      label: $t('common.operate'),
      width: 130,
      formatter: row => (
        <div class="flex-center">
          <ElButton type="primary" plain size="small" onClick={() => handleView(row)}>
            {$t('common.view')}
          </ElButton>
        </div>
      )
    }
  ]
});

const editingData = ref(null);

function handleAdd() {
  openAddModal();
}

function handleView(row) {
  editingData.value = row
  openViewModal();
}

async function fetchData(params){
  const res = await appStore.getCurrency()
  currencyList.value = res
  return fetchShopSeach(params)
}
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <StoreSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
    <ElCard class="sm:flex-1-hidden card-wrapper" body-class="ht50">
      <template #header>
        <TableHeaderOperation :loading="loading" @refresh="getData">
          <ElButton type="primary" @click="handleAdd">
            <template #icon>
              <icon-ic-round-plus class="text-icon" />
            </template>
            {{ $t('page.store.add') }}
          </ElButton>
        </TableHeaderOperation>
      </template>
      <div class="h-[calc(100%-50px)]">
        <ElTable v-loading="loading" height="100%" border class="sm:h-full" :data="data" row-key="ShopId">
          <ElTableColumn v-for="col in columns" :key="col.prop" v-bind="col" />
        </ElTable>
        <div class="mt-20px flex justify-end">
          <ElPagination
            v-if="mobilePagination.total"
            layout="total,prev,pager,next,sizes"
            v-bind="mobilePagination"
            @current-change="mobilePagination['current-change']"
            @size-change="mobilePagination['size-change']"
          />
        </div>
      </div>
    </ElCard>
    <StoreAddModal
      v-model:visible="addVisible"
      @submitted="getDataByPage"
    />
    <StoreEditModal
      v-model:visible="viewVisible"
      :row-data="editingData"
      @submitted="getDataByPage"
    />
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-card) {
  .ht50 {
    height: calc(100% - 50px);
  }
}
</style>
